<template>
  <div class="merchant-details">
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="商户-详情"
      size="70%"
      class="box-drawer"
      :with-header="false"
      :visible.sync="drawerLoading"
      :show-close="true"
      @close="cloneDrawer"
    >
      <!--头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>商户-详情</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <!--描述-->
      <div v-loading="subLoading">
        <div class="describe">
          <div class="describe-content">
            <el-image style="width: 60px;height: 60px;margin-right: 20px;border-radius: 6px;" v-if="merchantDetails" :src="merchantDetails.logo_image" :preview-src-list="[merchantDetails.logo_image]" />
            <div class="describe-content_center">
              <p>商户名称：<span>{{merchantDetails.name ? merchantDetails.name : '-'}}</span></p>
              <p>联系人：<span>{{merchantDetails.user_name ? merchantDetails.user_name : '-'}}</span></p>
              <p>联系电话：<span>{{merchantDetails.user_cellphone ? merchantDetails.user_cellphone : '-'}}</span></p>
              <p>商户类型：
              <span v-if="merchantDetails.type == 0">
                个人
              </span>
              <span v-if="merchantDetails.type == 1">
                个体工商户
              </span>
              <span v-if="merchantDetails.type == 2">
                企业
              </span>
              </p>
              <p>覆盖区域：<span>{{merchantDetails.province_name ? merchantDetails.province_name : ''}}{{merchantDetails.city_name ? merchantDetails.city_name:'-'}}{{merchantDetails.county_name ? merchantDetails.county_name : '-'}}</span></p>
            </div>
          </div>
          <p class="box-status" v-if="merchantDetails.status == 1">状态：<span style="color: #81b337">启用</span></p>
          <p class="box-status" v-else>状态：<span style="color: #ff4949">禁用</span></p>
        </div>
        <!--内容-->
        <div class="box-tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="基本信息">
              <basicInformation :type="type" :cate-list="cateList" :merchant-detailss="merchantDetails" />
            </el-tab-pane>
            <el-tab-pane label="认证信息" v-if="type != 1" name="认证信息">
              <autInformation :merchant-details="merchantDetails.company" />
            </el-tab-pane>
            <el-tab-pane label="法人" v-if="type != 1" name="法人">
              <legalInformation :merchant-details="merchantDetails.legalPerson" />
            </el-tab-pane>
            <el-tab-pane label="品牌授权" name="品牌授权">
              <brandInformation :merchant-details="merchantDetails.profile" />
            </el-tab-pane>
            <!-- <el-tab-pane label="收款信息" name="收款信息">
              <receiptInformation />
            </el-tab-pane> -->
            <el-tab-pane label="商户商品" name="商户商品">
              <merchantProducts ref="merproducts"/>
            </el-tab-pane>
            <el-tab-pane label="商户销售订单" name="商户销售订单">
              <merchantPay ref="merpays"/>
            </el-tab-pane>
            <el-tab-pane label="商户财务信息" name="商户财务信息">
              <merchantFinance ref="merfinance"/>
            </el-tab-pane>
            <el-tab-pane label="商户选品记录" name="商户选品记录">
              <merchantSelection ref="merselection"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import basicInformation from './components/basicInformation.vue'
import autInformation from './components/autInformation.vue'
import legalInformation from './components/legalInformation.vue'
import receiptInformation from './components/receiptInformation.vue'
import brandInformation from './components/brandInformation.vue'
import merchantProducts from './components/merchantProducts.vue'
import merchantPay from './components/merchantPay.vue'
import merchantFinance from './components/merchantFinance.vue'
import merchantSelection from './components/merchantSelection.vue'
import { getCateList, detailNew } from '@/api/merchant'
export default {
  name: 'MerchantDetails',
  components: {
    basicInformation,
    autInformation,
    legalInformation,
    receiptInformation,
    brandInformation,
    merchantProducts,
    merchantPay,
    merchantFinance,
    merchantSelection
  },
  data() {
    return {
      subLoading:false,
      drawerLoading: false,
      type: '1',
      merchantDetails: {
        company:{},
        legalPerson:{},
        profile:{}
      },
      cateList: [],
      activeName: '基本信息'
    }
  },
  created() {
  },
  methods: {
    async open(row) {
      this.type = row.type
      this.drawerLoading = true
      this.subLoading = true
      try {
        const res = await detailNew({ id: row.id })
        this.merchantDetails = res.data
        this.subLoading = false
        await this.getCateLists()
      } catch (e) {
        this.subLoading = false
      }
    },
    async getCateLists() {
      const res = await getCateList()
      this.cateList = res.data.list
    },
    cloneDrawer() {
      this.activeName = '基本信息'
      this.drawerLoading = false
    },
    //   标签切换
    handleClick(val) {
      if(this.activeName == '商户商品'){
        this.$refs.merproducts.getlist(this.merchantDetails.id)
      }
      if(this.activeName == '商户销售订单'){
        this.$refs.merpays.getlist(this.merchantDetails.id)
      }
      if(this.activeName == '商户财务信息'){
        this.$refs.merfinance.getlist(this.merchantDetails.id)
      }
      if(this.activeName == '商户选品记录'){
        this.$refs.merselection.getlist(this.merchantDetails.id)

      }
    }
  }
}
</script>
<style scoped lang="scss">
  .merchant-details{

  }
  .describe{
    width: 96%;
    margin: 20px auto;
    border: 1px solid #eee;
    border-radius:10px;
    padding: 20px;
    display: flex;
    .describe-content{
      display: flex;
      align-items: center;
      width: 90%;
      img{
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
      .describe-content_center{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 80%;
        height: 60px;
        p{
          font-size: 14px;
          width: 33%;
          line-height: 0;
          color: #606266;
          font-weight: 550;
        }
      }
    }
    .box-status{
      margin-top: 3px;
      width: 10%;
      color: #9a9a9a;
      font-weight: bold;
      font-size: 14px;
    }
  }

  .box-tabs{
    width: 96%;
    margin: 0 auto;
  }
</style>
